<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width:200px;
            height:200px;
            background-color: purple;
        }
        .div2{
            width:200px;
            height:200px;
            background-color: blue;
        }
        .div3{
            width:200px;
            height:200px;
            background-color: yellow;
        }

    </style>
</head>
<body>

<div class="div1">

    <p>1</p>
    <p>2</p>
</div>

<div class="div2">
    <p>3div</p>
    <p>4div</p>
</div>
<div class="div3">
    <p>5div</p>
    <p>6div</p>
</div>
<button id="btn1">利用empty进行清空</button>
<button id="btn2">利用remove进行选择清空</button>
<button id="btn3">利用remove进行清空自身节点。</button>

<hr>
<h1>用detach展示</h1>
<p>P元素1，默认给绑定一个点击事件</p>
<p>P元素2，默认给绑定一个点击事件</p>
<button id="bt1">点击删除 p 元素</button>
<button id="bt2">点击移动 p 元素</button>

<script src="../js/jquery-3.1.0.js"></script>
<script>
    $("button:first").click(function () {
        $(".div1").empty().text("div1中的所有的东西用empty被清空了。");//链式  就是一直可以写
    })
    $("#btn2").click(function () {
        $("p").remove(":contains('3')")//清空内容有3的元素。进行选择性清除
    })
    $("#btn3").click(function () {
        $(".div3").remove();//清除div3中的所有东西 包括自身
    })


    //高级玩意  detach()  只是把数据不再界面显示了，内存中还保存一份。
    var p;
    $("#bt1").click(function () {
        if (!$("p").length){
            return ;//去重
        }
        p=$("p").detach();//保留在内存中。
    })
    $("#bt2").on("click",function () {
        $("body").append(p);//利用append弄出来
    })


</script>
</body>
</html>